<script setup>
import { onMounted, reactive } from 'vue';
import { getStatisticsOneApi } from '@/api/console/ConsoleApi';
import ConsoleNav from './components/ConsoleNav.vue' // 主控台导航栏
import ConsoleBottom from './components/ConsoleBottom.vue'; // 主控台底部

// 获取token存储到对象中
const UserToken = localStorage.getItem('user-token'); 
const TokenData = reactive({
	token:UserToken
})

// 存储后台首页统计 1 的数据
const StatisticsOneData = reactive({
	msg:'',
	panels:[]
}) 


onMounted(() => {
	OnStatisticsOneData()
})


// 后台首页统计 1 的数据
const OnStatisticsOneData = async () => {
	const { msg, data } = await getStatisticsOneApi(TokenData)
	StatisticsOneData.msg = msg
	StatisticsOneData.panels = data.panels
}


</script>

<template>
  <div class="content">
		<el-scrollbar height="600px">

			<!-- 支付订单，订单量，销售额，新增用户 -->
			<div class="ProbablyTop">
				<div class="ProbablyStyle" v-for="item in StatisticsOneData.panels" :key="item.id">
					<div class="kapiantop">
						<p>{{ item.title }}</p>
						<!-- 组件动态添加属性不需要写 {{  }} -->
						<el-button :type="item.unitColor" class="TimeUnit">{{ item.unit }}</el-button>
					</div>

					<h1 class="measure">{{ item.value }}</h1>

					<div class="kapianbottom">
						<p>{{ item.subTitle }}</p>
						<p>{{ item.subValue }}</p>
					</div>

				</div>
			</div>
			<!-- 支付订单，订单量，销售额，新增用户 end -->
			
			<!-- 主控台导航栏 -->
			 <ConsoleNav></ConsoleNav>
			<!-- 主控台导航栏 end -->

			<!-- 主控台底部 -->
			 <ConsoleBottom></ConsoleBottom>
			<!-- 主控台底部 end -->

		</el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.content{
	.ProbablyTop{
    width: 100%;
    display: flex;
    justify-content: space-between;

    .ProbablyStyle{
      width: 300px;
      height: 200px;
      background-color: #ffffff;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			

			.kapiantop{
				display: flex;
				justify-content: space-between;
				padding-left: 10px;
				padding-right: 10px;
				margin-top: 10px;

				.TimeUnit{
					width: 40px;
					height: 25px;
					text-align: center;
					font-weight: 600;
					border-radius:5px;
				}

			}

			.measure{
				height: 70px;
				border-top: 1px solid #edeef0;
				border-bottom: 1px solid #edeef0;
				color: #6b7280;
				display: flex;
				align-items: center;
				margin-left: 10px;
				margin-right: 10px;
			}

			.kapianbottom{
				margin-left: 10px;
				margin-right: 10px;
				margin-bottom: 10px;
				display: flex;
				justify-content: space-between;
				
			}

    }
  }
} 
</style>
